@use "sass:map";

.sim-link {
  display: flex;

  &:hover, &.show {
    background-color: rgba(0,0,0,0.5);
  }

  .sim-link-content {
    padding: map.get($spacers, 2);
    display: flex;
    align-items: center;

    .sim-link-icon {
      width: 3rem;
      height: 3rem;
      margin-right: map.get($spacers, 2);
    }

    .sim-link-label, .launch-status-label {
      font-size: .75rem;
      font-weight: normal;
      white-space: nowrap;
    }

    .sim-link-title {
      font-size: 1.25rem;
      font-weight: bold;
      white-space: nowrap;
    }
  }
}

.sim-link-dropdown {
  .dropdown-menu {
    background: rgba(0,0,0,.5);
  }
}

@include media-breakpoint-down(lg) {
  .sim-link-dropdown {
    .dropdown-menu {
      position: relative !important;
      inset: 0 !important;
      transform: none !important;
    }
  }
}
